<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div>
              <span>通用流程测试</span>
            </div>
          </template>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="流程名称">
              <el-input v-model="form.wfName"></el-input>
            </el-form-item>
            <el-form-item label="流程编码">
              <el-input v-model="form.wfCode"></el-input>
            </el-form-item>
            <el-form-item label="流程参数">
              <el-input type="textarea" :rows="4" v-model="form.params"></el-input>
            </el-form-item>
            <el-form-item label="Rest启动">
              <el-button type="primary" @click="onSubmit">直接启动</el-button>
              <el-button type="primary" @click="onSelectAndSubmit(false)">启动并选择处理人</el-button>
              <el-button type="primary" @click="onSelectAndSubmit(true)">启动并完成第一步并选择处理人</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div>
              <span>通用流程测试样例数据(点击选择数据)</span>
            </div>
          </template>
          <el-table :data="sampleWfDatas" style="width: 100%" @row-click="selectSampleWfData">
            <el-table-column prop="wfName" label="流程名称" width="180"> </el-table-column>
            <el-table-column prop="wfCode" label="流程编码" width="180"> </el-table-column>
            <el-table-column prop="params" label="流程参数"> </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-divider content-position="left">特定示例</el-divider>
    <el-row :gutter="20">
      <el-col :span="12">
        <wf-leave-samples />
      </el-col>
    </el-row>
    <select-next-user :selectUserParam="selectUserParam" :visible="selectUserOpen" @selected="doSelected" @close="selectUserOpen=false" />
  </div>
</template>

<script>
import WfLeaveSamples from './leave/index.vue'

export default {
  components: { WfLeaveSamples },
  data() {
    return {
      form: {
        wfName: '测试请假流程',
        wfCode: 'SAMPLES_LEAVE',
        params: '{ "leaveDays": 2, "completeFirst": false}',
      },
      sampleWfDatas: [{
        wfName: '测试请假流程',
        wfCode: 'SAMPLES_LEAVE',
        params: '{ "leaveDays": 2, "completeFirst": false}'
      }, {
        wfName: '参与人变量数组示例',
        wfCode: 'SAMPLES_LIST_STRING',
        params: '{ "userIds": "10#11#48","companyCodes":"A0100#A0001","deptCodes":"D0102#D0104#D0103","roleCodes":"deptUser#deptAdmin#deptManager", "completeFirst": false}'
      }, {
        wfName: '待办超时跳转示例',
        wfCode: 'SAMPLES_TIMEOUT',
        params: '{ "timeout": "PT1M" }'
      }],
      selectUserParam: {},
      selectUserOpen: false,
    }
  },
  methods: {
    // 选择测试数据
    selectSampleWfData(row, column, event) {
      this.form.wfName = row.wfName;
      this.form.wfCode = row.wfCode;
      this.form.params = row.params;
    },
    // 直接使用WfClient调用流程引擎的Rest启动
    onSubmit() {
      const businessKey = (new Date()).getTime();
      const businessSubject = this.form.wfName + "【" + businessKey + "】";
      const params = JSON.parse(this.form.params);
      this.wfClient.startWfInstance(null, this.form.wfCode, businessKey, businessSubject, params, (res) => {
        console.log(res);
        this.msgSuccess("流程发起成功：流程实例ID=" + res.data);
      });
    },
    // 选择下一步处理人并使用WfClient调用流程引擎的Rest启动
    onSelectAndSubmit(completeFirst) {
      const businessKey = (new Date()).getTime();
      const businessSubject = this.form.wfName + "【" + businessKey + "】";
      const params = JSON.parse(this.form.params);
      params.completeFirst = completeFirst;
      this.wfClient.startWfInstanceAndSelectUser(this, this.form.wfCode, businessKey, businessSubject, params, this.startedCallback);
    },
    // 选中用户
    doSelected(candidates) {
      this.selectUserOpen = false;

      var params = this.selectUserParam.params;
      // 将选中的参与人放入参数中
      params.candidates = candidates.join(',');
      this.wfClient.startWfInstance(this, this.selectUserParam.wfCode, this.selectUserParam.businessKey, this.selectUserParam.businessSubject, null, null, null, params, this.startedCallback);
    },
    // 流程启动成功后回调
    startedCallback(res) {
      console.log(res);
      this.msgSuccess("流程发起成功：流程实例ID=" + res.data);
    },
  }
}
</script>

<style lang="scss" scoped>
</style>
